<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Admintasia | Powerful backend admin user interface</title>
	<link href="style.css" rel="stylesheet" media="all" />
	<link href="#" rel="stylesheet" title="style" media="all" />
	<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="js/superfish.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.7.2.js"></script>
	<script type="text/javascript" src="js/tooltip.js"></script>
	<script type="text/javascript" src="js/tablesorter.js"></script>
	<script type="text/javascript" src="js/tablesorter-pager.js"></script>
	<script type="text/javascript" src="js/cookie.js"></script>
	<script type="text/javascript" src="js/custom.js"></script>
	<!--[if IE 6]>
	<link href="css/ie6.css" rel="stylesheet" media="all" />
	
	<script src="js/pngfix.js"></script>
	<script>
	  /* EXAMPLE */
	  DD_belatedPNG.fix('.logo, .other ul#dashboard-buttons li a');

	</script>
	<![endif]-->
	<!--[if IE 7]>
	<link href="css/ie7.css" rel="stylesheet" media="all" />
	<![endif]-->
</head>
<body>
	<div id="header">
		<div id="top-menu">
			<a href="#" title="My account">My account</a> |
			<a href="#" title="Settings">Settings</a> |
			<a href="#" title="Contact us">Contact us</a>
			
			<span>Logged in as <a href="#" title="Logged in as admin">admin</a></span>
			| <a href="#" title="Edit profile">Edit profile</a>
			| <a href="#" title="Logout">Logout</a>
		</div>
		<div id="sitename">
			<a href="index.html" class="logo float-left" title="Admintasia">Admintasia</a>
			<div class="button float-right">
				<a href="#" id="dialog_link" class="btn ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a>
				<a href="#" id="login_dialog" class="btn ui-state-default ui-corner-all"><span class="ui-icon ui-icon-image"></span>Open Login Box</a>
			</div>
			<div id="login" title="Members Login">
				<form action="#" method="post" enctype="multipart/form-data" class="forms" name="form" >
					<ul>
						<li>
							<label for="email" class="desc">
								Email:
							</label>
							<div>
								<input type="text" tabindex="1" maxlength="255" value="" class="field text full" name="email" id="email" />
							</div>
						</li>
						<li>
							<label for="password" class="desc">
								Password:
							</label>
							<div>
								<input type="text" tabindex="1" maxlength="255" value="" class="field text full" name="password" id="password" />
							</div>
						</li>
					</ul>
				</form>
			</div>
			<div id="dialog" title="Dialog Title">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
			</div>
		</div>
		<ul id="navigation" class="sf-navbar">
			<li>
				<a href="index.html">Dashboard</a>
				<ul>
					<li><a href="index.html">Administration</a></li>
					<li><a href="forms.html">Forms</a></li>
					<li><a href="tables.html">Tables</a></li>
					<li><a href="msg.html">Response Messages</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Dummy menu</a>
				<ul>
					<li>
						<a href="#">Menu item 1</a>
						<ul>
							<li><a href="#">Subitem 1</a></li>
							<li><a href="#">Subitem 2</a></li>
						</ul>
					</li>
					<li>
						<a href="#">Menu item 2</a>
					</li>
					<li>
						<a href="#">Menu item 3</a>
					</li>
					<li>
						<a href="#">Menu item 4</a>
						<ul>
							<li><a href="#">Subitem 1</a></li>
							<li>
								<a href="#">Subitem 2</a>
								<ul>
									<li><a href="#">Subitem 1</a></li>
									<li>
										<a href="#">Subitem 2</a>
										<ul>
											<li><a href="#">Subitem 1</a></li>
											<li>
												<a href="#">Subitem 2</a>
											</li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Menu item 5</a>
						<ul>
							<li><a href="#">Subitem 1</a></li>
							<li><a href="#">Subitem 2</a></li>
						</ul>
					</li>
					<li>
						<a href="#">Menu item 6</a>
					</li>
					<li>
						<a href="#">Menu item 7</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">Layout Options</a>
				<ul>
					<li>
						<a href="three-columns-layout.html">Three columns</a>
					</li>
					<li>
						<a href="two-column-layout.html">Two columns</a>
					</li>
					<li>
						<a href="three-column-small-layout.html">One big, two small</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">Available components</a>
				<ul>
					<li>
						<a href="accordion.html">Accordion</a>
					</li>
					<li>
						<a href="tabs.html">Tabs</a>
					</li>
					<li>
						<a href="overlays.html">Overlays</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>	<div id="welcome" title="Welcome to Admintasia">
		<p><b>Admintasia</b> is a <b>lightweight</b>, fully and easily customisable <b>administration user interface</b>. Please proceed to the actual demo by clicking the button below. Enjoy !</p>
	</div>

	<div id="page-wrapper">
		<div id="main-wrapper">
			<div id="main-content">
				<div class="other-box yellow-box ui-corner-all">
					<div class="cont tooltip ui-corner-all" title="Tooltip example - this is an example for the tooptip plugin! - You can add tooltips to any element">
						<h3>Welcome !</h3>
						<p><b>Admintasia</b> is a <b>complete</b>, fully and easily customisable <b>backend administration user interface</b>. Please proceed to the actual demo by clicking the <b>Ok</b> button below. Enjoy !</p>

					</div>
				</div>
				<div class="page-title ui-widget-content ui-corner-all">
					<h1>Viewing: <b>Dashboard</b></h1>
					<div class="other">
						<div class="float-left">You can put some text/buttons here or just remove this div.</div>
						<div class="button float-right">

							<a href="#"  class="btn ui-state-default"><span class="ui-icon ui-icon-circle-plus"></span>Example</a>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="page-title ui-widget-content ui-corner-all">
					<h1>Administration Options</h1>
					<div class="other">

						<ul id="dashboard-buttons">
							<li>
								<a href="#" class="Book_phones tooltip" title="Book phones">
									Book phones
								</a>
							</li>
							<li>
								<a href="#" class="Books tooltip" title="Books">
									Books
								</a>

							</li>
							<li>
								<a href="#" class="Box_recycle tooltip" title="Box recycle">
									Box recycle
								</a>
							</li>
							<li>
								<a href="#" class="Books tooltip" title="Books">
									Books
								</a>

							</li>
							<li>
								<a href="#" class="Box_content tooltip" title="Box content">
									Box content
								</a>
							</li>
							<li>
								<a href="#" class="Briefcase_files tooltip" title="Briefcase files">
									Briefcase files
								</a>

							</li>
							<li>
								<a href="#" class="Chart_4 tooltip" title="Chart 4">
									Chart
								</a>
							</li>
							<li>
								<a href="#" class="Clipboard_3 tooltip" title="Clipboard 3">
									Clipboard
								</a>

							</li>
							<li>
								<a href="#" class="Chart_5 tooltip" title="Chart 5">
									Chart
								</a>
							</li>
							<li>
								<a href="#" class="Glass tooltip" title="Glass">
									Glass
								</a>

							</li>
							<li>
								<a href="#" class="Globe tooltip" title="Globe">
									Globe
								</a>
							</li>
							<li>
								<a href="#" class="Mail_compose tooltip" title="Mail compose">
									Mail compose
								</a>

							</li>
							<li>
								<a href="#" class="Mail_open tooltip" title="Mail open">
									Mail open
								</a>
							</li>
							<li>
								<a href="#" class="Monitor tooltip" title="Monitor">
									Monitor
								</a>

							</li>
							<li>
								<a href="#" class="Star tooltip" title="Star">
									Star
								</a>
								<div class="clearfix"></div>
							</li>
						</ul>
						<div class="clearfix"></div>
					</div>
					

				</div>
				<div class="title title-spacing">
					<h2>Dashboard grid example</h2>
					You can put whatever you like in these containers. I've mode some examples using accordions, buttons, news, tabs and forms. For more grid examples, visit <a href="#" title="More layout examples">this page</a>.
				</div>
				<div class="three-column">
					<div class="column">
						<div class="portlet form-bg">

							<div class="portlet-header">Form Example 2</div>
							<div class="portlet-content">
								<form action="#" method="post" enctype="multipart/form-data" class="forms" name="form" >
									<ul>
										<li>
											<label class="desc">
												Email:
											</label>
											<div>

												<input type="text" tabindex="1" maxlength="255" value="" class="field text full" name="" />
												<span class="red">Error message example ...</span>
											</div>
										</li>
										<li>
											<label class="desc">
												Password:
											</label>
											<div>

												<input type="password" tabindex="1" maxlength="255" value="" class="field text full" name="" />
												<label>These inputs have class="full", which means that they have 100% width.</label>
											</div>
										</li>
										<li class="buttons">
											<button type="submit" value="Submit" class="ui-state-default ui-corner-all" id="saveForm">Login</button>
										</li>
									</ul>

								</form>
								<div class="linetop clearfix"></div>
								<p>Added class="form-bg" to obtain the light gray background.</p>
							</div>
						</div>
						<div class="portlet">
							<div class="portlet-header">Something else ...</div>
							<div class="portlet-content">

								<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
								
								<p> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
								
								<p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
								
								<p> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex </p>
							</div>

						</div>
					</div>
					
					<div class="column">
						<div class="portlet">
							<div class="portlet-header">Tabs, messages and tables</div>
							<div class="portlet-content">
								<div id="tabs">
									<ul>

										<li><a href="#tabs-1">First</a></li>
										<li><a href="#tabs-2">Second</a></li>
										<li><a href="#tabs-3">Third</a></li>
									</ul>
									<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
									<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>

									<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
								</div>
								<div class="other-box gray-box float-left width50 ui-corner-all">
									<div class="cont ui-corner-all">
										<h3>Grey Box</h3>
										<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
									</div>

								</div>
								<div class="other-box yellow-box float-right width50 ui-corner-all">
									<div class="cont ui-corner-all">
										<h3>Notice Box</h3>
										<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
									</div>
								</div>
								<div class="clearfix"></div>

								<i class="note">* Table example below: </i>
								<div class="hastable">
									<table cellspacing="0">
										<thead>
											<tr>
												<td><input type="checkbox" class="checkbox" value=""/></td>
												<td>Name</td>
												<td>Email</td>

												<td>Options</td>
											</tr>
										</thead>
										<tbody>
											<tr>  	  	
												<td>
													<input type="checkbox" class="checkbox" value=""/>
												</td>
												<td>

													John 
												</td>
												<td>
													Lorem .
												</td>
												<td>
													Options
												</td>
											</tr>
											<tr class="alt">  	  	
												<td>

													<input type="checkbox" class="checkbox" value=""/>
												</td>
												<td>
													John 
												</td>
												<td>
													Lorem .
												</td>
												<td>
													Options
												</td>

											</tr>
											<tr>  	  	
												<td>
													<input type="checkbox" class="checkbox" value=""/>
												</td>
												<td>
													John 
												</td>
												<td>
													Lorem .
												</td>

												<td>
													Options
												</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>

					</div>
					
					<div class="column">
						<div class="portlet">
							<div class="portlet-header">Buttons</div>
							<div class="portlet-content">
								<p>Admintasia contains a total of more than 180 icons. I only added a few for demonstration. In the theme package you will find a page that contains all buttons you have at your disposal (buttons.html)</p>
								<ul id="icons" class="ui-widget ui-helper-clearfix">
									<li class="ui-state-default ui-corner-all" title=".ui-icon-star"><span class="ui-icon ui-icon-star"></span></li>
									<li class="ui-state-default ui-corner-all" title=".ui-icon-link"><span class="ui-icon ui-icon-link"></span></li>
									<li class="ui-state-default ui-corner-all" title=".ui-icon-cancel"><span class="ui-icon ui-icon-cancel"></span></li>
									<li class="ui-state-default ui-corner-all" title=".ui-icon-plus"><span class="ui-icon ui-icon-plus"></span></li>
									<li class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></li>
									<li class="ui-state-default ui-corner-all" title=".ui-icon-minus"><span class="ui-icon ui-icon-minus"></span></li>
									<li class="ui-state-default ui-corner-all" title=".ui-icon-minusthick"><span class="ui-icon ui-icon-minusthick"></span></li>
									<li class="ui-state-default ui-corner-all" title=".ui-icon-close"><span class="ui-icon ui-icon-close"></span></li>

									<li class="ui-state-default ui-corner-all" title=".ui-icon-script"><span class="ui-icon ui-icon-script"></span></li>
									<li class="ui-state-default ui-corner-all" title=".ui-icon-alert"><span class="ui-icon ui-icon-alert"></span></li>

								</ul>
								<div class="clearfix"></div>
								<p>You can transform those icons into links.See the examples below.</p>
								
								<div class="clearfix"></div>
									<a href="#" class="btn ui-state-default ui-corner-all">
										<span class="ui-icon ui-icon-grip-dotted-horizontal"></span>
										Button 1
									</a>
									<a href="#" class="btn ui-state-default ui-corner-all">

										<span class="ui-icon ui-icon ui-icon-gripsmall-diagonal-se"></span>
										Button 2
									</a>
									<a href="#" class="btn ui-state-default ui-corner-all">
										<span class="ui-icon ui-icon-grip-solid-horizontal"></span>
										Button 3
									</a>
									<a href="#" class="btn ui-state-default ui-corner-all">
										<span class="ui-icon ui-icon-grip-solid-vertical"></span>
										Button 3
									</a>

								<div class="clearfix"></div>
								<p class="title-spacing linetop">Here is a pagination example:</p>
								<ul class="pagination">
									<li class="previous-off">&laquo;Previous</li>
									<li class="active">1</li>
									<li><a href="#">2</a></li>
									<li><a href="#">3</a></li>

									<li><a href="#">4</a></li>
									<li><a href="#">5</a></li>
									<li><a href="#">6</a></li>
									<li><a href="#">7</a></li>
									<li><a href="#">8</a></li>
									<li><a href="#">9</a></li>

									<li><a href="#">10</a></li>
									<li class="next"><a href="#">Next &raquo;</a></li>
								</ul>
								<div class="clearfix"></div>
							</div>
						</div>
						<div class="portlet">
							<div class="portlet-header">Notification Messages</div>
							<div class="portlet-content">
								<p>Admintasia contains a total of more than 180 icons. I only added a few for demonstration. In the theme package you will find a page that contains all buttons you have at your disposal (buttons.html)</p>
								<div class="title">
									<h3>Response messages</h3>
									Below you will find <b>Admintasia</b> response messages.
								</div>
								<div class="response-msg error ui-corner-all">
									<span>Error message</span>
									Lorem ipsum dolor sit amet, consectetuer adipiscing elit
								</div>
								<div class="response-msg notice ui-corner-all">
									<span>Notice message</span>
									Lorem ipsum dolor sit amet, consectetuer adipiscing elit
								</div>
							
								<div class="response-msg inf ui-corner-all">
									<span>Information message</span>
									Lorem ipsum dolor sit amet, consectetuer adipiscing elit
								</div>
							
								<div class="response-msg success ui-corner-all">
									<span>Success message</span>
									Lorem ipsum dolor sit amet, consectetuer adipiscing elit
								</div>
								<div class="clearfix"></div>
							</div>
						</div>
					</div>
				</div>

			</div>
			<div class="clearfix"></div>
		</div>
		<div id="sidebar">
			<div class="side-col ui-sortable">
				<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
					<div class="portlet-header ui-widget-header">Theme Switcher</div>
					<div class="portlet-content">
						<ul class="side-menu">
							<li>
								<a class="set_theme" id="default" href="javascript:void(0);" style="font-weight:bold;" title="Default Theme">Default Theme</a>
							</li>
							<li>
								<a class="set_theme" id="light_blue" href="javascript:void(0);" title="Light Blue Theme">Light Blue Theme</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
					<div class="portlet-header ui-widget-header">Layout Options</div>
					<div class="portlet-content">
						<ul class="side-menu">
							<li>
								Here, you can set the page width, either fixed or fluid. You decide!<br /><br />
							</li>
							<li id="fluid_layout">
								<a href="javascript:void(0);" title="Fluid Layout">Switch to <b>Fluid Layout</b></a>
							</li>
							<li id="fixed_layout">
								<a href="javascript:void(0);" title="Fixed Layout">Switch to <b>Fixed Layout</b></a>
							</li>
						</ul>
					</div>
				</div>
				<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
					<div class="portlet-header ui-widget-header">Navigation Menu</div>
					<div class="portlet-content">
						<div id="accordion">
							<div>
								<h3><a href="#">Dashboard</a></h3>
								<div>
									<ul class="side-menu">
										<li><a href="index.html" title="Administration">Administration</a></li>
										<li><a href="forms.html" title="Forms">Forms Example</a></li>
										<li><a href="tables.html" title="Tables">Tables example</a></li>
									</ul>
								</div>
							</div>
							<div>
								<h3><a href="#">Dummy drop down</a></h3>
								<div>
									<ul class="side-menu">
										<li><a href="index.html" title="Administration">Administration</a></li>
										<li><a href="forms.html" title="Forms">Forms Example</a></li>
										<li><a href="tables.html" title="Tables">Tables example</a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="other-box yellow-box ui-corner-all">
					<div class="cont tooltip ui-corner-all" title="Tooltips, tooltips, tooltips !">
						<h3>Tooltip !</h3>
						<p>This is a sample tooltip !</p>
					</div>
				</div>
				<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
					<div class="portlet-header ui-widget-header">Accordion</div>
					<div class="portlet-content">
						<div id="datepicker"></div>
					</div>
				</div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
	<div class="clearfix"></div>
	<div id="footer">
		<div id="menu">
			<a href="#" title="Home">Home</a>
			<a href="#" title="Administration">Administration</a>
			<a href="#" title="Settings">Settings</a>
			<a href="#" title="Contact">Contact</a>
		</div>
		Copyright &copy; 2009 - Horia Simon (WebDesignChimera.com)
	</div>
</body>

<!-- Mirrored from www.admintasia.com/admintasia_v1/index.php by HTTrack Website Copier/3.x [XR&CO'2010], Thu, 25 Nov 2010 09:58:20 GMT -->
</html>